import React, {Component} from 'react';
import {
    Dimensions,
    Modal,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
    ScrollView,
    SafeAreaView,
    TextInput
} from 'react-native';
import {SCREEN_HEIGHT, SCREEN_WIDTH} from "../../../constant/PHScreen";
import {COLOR_FOCUS, COLOR_GRAY_LINE, FONT_COLOR_SUB_TITLE} from "../../../constant/PHColors";
import ScrollableTabView, {DefaultTabBar} from "react-native-scrollable-tab-view";
import AntDesign from "react-native-vector-icons/AntDesign";
import Entypo from "react-native-vector-icons/Entypo";
import HS_TouchableHighlight from "../../../hsstyle/HS_TouchableHighlight";
import connect from "react-redux/es/connect/connect";

class selectDictcodePlugIn extends Component {

    static navigationOptions = ({navigation}) => ({
        headerTitle: `请选择`,
    });

    constructor(props) {
        super(props);

        let checked_json = {};
        if(this.props.navigation.getParam("checked")){
            this.props.navigation.getParam("checked").map((item,index)=>{
                checked_json[item.code] = item;
            })
        }

        this.state = {
            dateSource: this.props.navigation.getParam("dateSource")?this.props.navigation.getParam("dateSource"):[],            //数据源
            checked: this.props.navigation.getParam("checked")?this.props.navigation.getParam("checked"):[],            //已选
            checked_json:checked_json,
        };
    }

    render() {
        return (
            <SafeAreaView style={styles.body}>
                <SafeAreaView style={[styles.container, {paddingBottom: 50}]}>
                    <ScrollView style={styles.scrollView}>
                        {
                            this.state.dateSource.map((item, index) => {
                                return (
                                    this._render_Item(item, index)
                                );
                            })
                        }
                    </ScrollView>
                </SafeAreaView>

                <View style={styles.bodyBottom}>

                    <TouchableOpacity activeOpacity={0.8} onPress={() => this.returnBack()}>
                        <View style={styles.bodyBottomRight}>
                            <Text style={styles.cellTitleText}>
                                完成
                            </Text>
                        </View>
                    </TouchableOpacity>

                </View>
            </SafeAreaView>
        );
    }

    //布草循环
    _render_Item = (item, index) => {
        let returnHtml;

        if(item.level==='2'){
            returnHtml = (
                <View style={styles.cellMenuView}>
                    <Text style={styles.cellMenuText}>
                        {item.name}
                    </Text>
                </View>
            );
        }

        if(item.level==='3'){
            returnHtml = (
                <HS_TouchableHighlight key={index} onPress={() => {
                    const checked_json = this.state.checked_json;
                    if (checked_json[item.code]) {
                        delete checked_json[item.code]
                    } else {
                        checked_json[item.code] = item;
                        checked_json[item.code]['count'] = '1';
                    }

                    let checked = []
                    for (let key in checked_json){
                        checked.push(checked_json[key])
                    }

                    this.setState({
                        checked:checked,
                        checked_json: checked_json,
                    });
                }}>
                    <View style={styles.boxBody}>
                        <View style={styles.leftBox}>
                            {
                                (this.state.checked_json[item.code])
                                    ?
                                    (<AntDesign name={'checkcircle'} size={23} style={{color: COLOR_FOCUS, marginLeft: 10}}/>)
                                    :
                                    (<Entypo name={'circle'} size={23} style={{color: '#b3b9ba', marginLeft: 10}}/>)
                            }
                            <Text style={styles.leftText}>
                                {item.name}
                            </Text>
                        </View>

                        {
                            (this.state.checked_json[item.code])
                            &&
                            (
                                <TouchableOpacity style={styles.rightBox} onPress={() => {

                                }}>
                                    <Text style={styles.rightText}>
                                        数量：
                                    </Text>
                                    <TextInput
                                        placeholder={'0'}
                                        style={{
                                            fontSize: 18,
                                            paddingLeft:5,
                                            paddingRight:5,
                                            color:COLOR_FOCUS,
                                        }}
                                        numberOfLines={1}
                                        underlineColorAndroid={'transparent'}
                                        onChangeText ={(text)=>{
                                            let count = text.replace(/[^\d]+/, '');
                                            this.state.checked_json[item.code]['count'] = count;
                                            this.setState({checked_json: this.state.checked_json})
                                        }}
                                        keyboardType='numeric'
                                        defaultValue = {this.state.checked_json[item.code]['count']}
                                    />
                                </TouchableOpacity>
                            )
                        }
                    </View>
                </HS_TouchableHighlight>
            )
        }
        return returnHtml;
    };

    returnBack(){
        let out_arr = [];
        this.state.checked.map((item,index)=>{
            if(Number(item.count)>0){
                out_arr.push(item)
            }
        });
        this.props.navigation.state.params.callBack(out_arr);
    }
}

const props = state => {
    return {

    }
};

export default selectDictcodePlugIn = connect(props)(selectDictcodePlugIn);

const styles = StyleSheet.create({
    body: {
        flex: 1,
    },

    container: {
        flex: 1,
        // width:SCREEN_WIDTH,
        backgroundColor: '#ffffff',
    },

    scrollView: {
        flex: 1,
        backgroundColor: '#ffffff',
    },

    cellMenuView:{
        height: 40,
        flexDirection: 'row',
        borderColor: '#ffffff',
        backgroundColor:'#E5ECED',
        width:SCREEN_WIDTH,
    },

    cellMenuText:{
        flex: 1,
        marginLeft: 10,
        marginTop: 5,
        fontSize: 20,
        color: FONT_COLOR_SUB_TITLE
    },

    boxBody: {
        height: 50,
        borderColor: '#e8e8e8',
        borderLeftWidth: 1,
        borderTopWidth: 0,
        borderBottomWidth: 1,
        borderRightWidth: 1,
        justifyContent:'center',
        flexDirection: 'row',
        width:SCREEN_WIDTH,
    },

    leftBox: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
        marginRight: 15
    },

    leftText:{
        fontSize:20,
        color:'#4c4c4c',
        left:10,
    },

    rightText:{
        fontSize:20,
        color:'#4c4c4c',
        left:10,
    },

    numberText:{
        fontSize:20,
        color:COLOR_FOCUS,
        left:10,
    },

    rightBox: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
        marginRight: 15,
        width:100,
    },

    /*模态样式*/
    modalContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.3)'
    },

    modalContainer_menu: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0)'
    },

    modalView: {
        width: SCREEN_WIDTH - 150,
        height: SCREEN_HEIGHT-120,
        backgroundColor: '#FFF',
    },

    modalHeader: {
        height: 50,
        justifyContent: 'center',
        alignItems: 'center',
        borderBottomWidth: 2,
        borderBottomColor: COLOR_FOCUS
    },

    modalHeaderText: {
        fontSize: 20,
        color: COLOR_FOCUS
    },

    modalItemView: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        height:40,
    },

    modalItemText: {
        fontSize: 20,
        color: FONT_COLOR_SUB_TITLE
    },

    modalBox:{
        alignItems:'center',
        backgroundColor:'white',
        width: 120,
        borderRadius:10,
        borderWidth:1,
        borderColor:'#b2b2b2',
        bottom: 50,
        position:'absolute',
        marginLeft:SCREEN_WIDTH/24,
    },

    modalBottom:{
        height:40,
        width:120,
        alignItems:'center',
        justifyContent:'center',
    },

    modalTitleText:{
        fontSize:17,
        color:'black',
    },

    /*页面底部菜单*/
    bodyBottom:{
        height:40,
        width:SCREEN_WIDTH,
        bottom:5,
        alignItems:'center',
        justifyContent:'center',
        position:'absolute',
        backgroundColor:'#ffffff',
        flexDirection:'row'
    },

    bodyBottomLeft:{
        marginLeft:SCREEN_WIDTH/24,
        marginRight:SCREEN_WIDTH/24,
        width:SCREEN_WIDTH/8,
        backgroundColor:'#6f6f6f',
        height:40,
        borderRadius: 5,
        alignItems:'center',
        justifyContent: 'center',
    },

    bodyBottomRight:{
        width:SCREEN_WIDTH*6/8,
        backgroundColor:'#1f60ff',
        height:40,
        borderRadius: 5,
        alignItems:'center',
        justifyContent: 'center',
    },

    cellTitleText: {
        fontSize: 20,
        color: '#ffffff',
        marginBottom: 1,
        textAlign:'center',
    },
});